Visaptveroša rokasgrāmata par tīmekļa piekļūstamību, kas vērsta uz vietņu optimizēšanu ekrāna lasītājiem, lai nodrošinātu iekļaujošu pieredzi visiem lietotājiem.
Tīmekļa Piekļūstamība: Jūsu Vietnes Optimizēšana Ekrāna Lasītāju Lietotājiem
Mūsdienu digitālajā laikmetā tīmekļa piekļūstamība nav tikai vēlama īpašība; tā ir pamatprasība. Piekļūstama vietne nodrošina, ka cilvēki ar invaliditāti, ieskaitot tos, kas paļaujas uz ekrāna lasītājiem, var uztvert, saprast, pārvietoties un mijiedarboties ar tīmekli.
Šī visaptverošā rokasgrāmata detalizēti aplūkos jūsu vietnes optimizēšanas specifiku ekrāna lasītāju lietotājiem, aptverot būtiskākās tehnikas, labāko praksi un reālās dzīves piemērus.
Kas ir Ekrāna Lasītājs?
Ekrāna lasītājs ir palīgtehnoloģija, kas pārvērš tekstu un citus elementus datora ekrānā runas vai Braila raksta izvadē. Tas ļauj cilvēkiem ar redzes traucējumiem piekļūt digitālajam saturam un ar to mijiedarboties. Populāri ekrāna lasītāji ir:
- JAWS (Job Access With Speech): Plaši izmantots ekrāna lasītājs operētājsistēmai Windows.
- NVDA (NonVisual Desktop Access): Bezmaksas un atvērtā pirmkoda ekrāna lasītājs operētājsistēmai Windows.
- VoiceOver: Apple iebūvētais ekrāna lasītājs macOS un iOS sistēmām.
- ChromeVox: Ekrāna lasītāja paplašinājums pārlūkam Google Chrome un Chrome OS.
- Orca: Bezmaksas un atvērtā pirmkoda ekrāna lasītājs operētājsistēmai Linux.
Ekrāna lasītāji darbojas, interpretējot vietnes pamatkodu un sniedzot lietotājam informāciju par saturu un struktūru. Ir būtiski, lai vietnes būtu strukturētas tā, lai ekrāna lasītāji tās varētu viegli saprast un tajās pārvietoties.
Kāpēc Ekrāna Lasītāja Optimizācija ir Svarīga?
Vietnes optimizēšana ekrāna lasītājiem sniedz daudzas priekšrocības:
- Iekļaušana: Nodrošina, ka lietotāji ar redzes traucējumiem var efektīvi piekļūt jūsu vietnei un to izmantot.
- Atbilstība Likumdošanai: Daudzās valstīs ir likumi un noteikumi, kas pieprasa tīmekļa piekļūstamību (piem., Amerikāņu ar invaliditāti akts (ADA) Amerikas Savienotajās Valstīs, Piekļūstamības likums ontariešiem ar invaliditāti (AODA) Kanādā un EN 301 549 Eiropā).
- Uzlabota Lietotāja Pieredze: Piekļūstams dizains bieži vien nodrošina labāku lietotāja pieredzi visiem lietotājiem, neatkarīgi no invaliditātes.
- Plašāka Auditorijas Sasniedzamība: Padarot savu vietni piekļūstamu, jūs to atverat plašākai potenciālajai auditorijai.
- SEO Priekšrocības: Meklētājprogrammas dod priekšroku piekļūstamām vietnēm, kas var uzlabot jūsu pozīcijas meklēšanas rezultātos.
Ekrāna Lasītāja Optimizācijas Galvenie Principi
Šie principi ir būtiski, lai izveidotu ekrāna lasītājiem draudzīgas vietnes:
1. Semantiskais HTML
Pareiza semantisko HTML elementu lietošana ir izšķiroša, lai piešķirtu jūsu saturam struktūru un nozīmi. Semantiskie elementi nodod ekrāna lasītājiem informāciju par dažādu jūsu vietnes daļu mērķi, ļaujot lietotājiem efektīvāk pārvietoties.
Piemēri:
- Lietojiet
<header>
vietnes galvenei. - Lietojiet
<nav>
navigācijas izvēlnēm. - Lietojiet
<main>
galvenā satura apgabalam. - Lietojiet
<article>
, lai ietvertu neatkarīgus satura blokus. - Lietojiet
<aside>
papildinošam saturam. - Lietojiet
<footer>
vietnes kājenei. - Lietojiet
<h1>
līdz<h6>
virsrakstiem. - Lietojiet
<p>
rindkopām. - Lietojiet
<ul>
un<ol>
sarakstiem.
Koda piemērs:
<header>
<h1>Mana Vietne</h1>
<nav>
<ul>
<li><a href="#">Sākums</a></li>
<li><a href="#">Par mums</a></li>
<li><a href="#">Pakalpojumi</a></li>
<li><a href="#">Kontakti</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Raksta virsraksts</h2>
<p>Šis ir raksta galvenais saturs.</p>
</article>
</main>
<footer>
<p>Autortiesības 2023</p>
</footer>
2. Alternatīvais Teksts Attēliem
Attēliem vienmēr ir jābūt aprakstošam alternatīvajam tekstam (alt tekstam), kas nodod attēla saturu un mērķi ekrāna lasītāju lietotājiem. Alt tekstam jābūt kodolīgam un informatīvam.
Labākā prakse:
- Nodrošiniet alt tekstu visiem attēliem, ieskaitot dekoratīvos.
- Alt tekstam jābūt īsam un aprakstošam.
- Izvairieties no frāzēm kā "attēls ar" vai "bilde ar".
- Sarežģītiem attēliem apsveriet iespēju izmantot garu aprakstu (
longdesc
atribūtu vai atsevišķu aprakstošu tekstu). - Ja attēls ir tīri dekoratīvs un nepievieno nozīmi, izmantojiet tukšu alt atribūtu (
alt=""
), lai ekrāna lasītāji to neizziņotu.
Koda piemērs:
<img src="logo.png" alt="Uzņēmuma logo">
<img src="decorative.png" alt="">
3. ARIA Atribūti
ARIA (Accessible Rich Internet Applications) atribūti nodrošina ekrāna lasītājiem papildu informāciju par elementu lomu, stāvokli un īpašībām, īpaši attiecībā uz dinamisku saturu un sarežģītiem logrīkiem. ARIA atribūti var uzlabot piekļūstamību, ja ar semantisko HTML vien nepietiek.
Biežāk lietotie ARIA atribūti:
- role: Definē elementa lomu (piem.,
role="button"
,role="navigation"
). - aria-label: Nodrošina teksta etiķeti elementam, ja vizuāla etiķete nav pieejama vai pietiekama.
- aria-labelledby: Saista elementu ar citu elementu, kas kalpo kā tā etiķete.
- aria-describedby: Saista elementu ar citu elementu, kas nodrošina tā aprakstu.
- aria-hidden: Paslēpj elementu no ekrāna lasītājiem.
- aria-live: Norāda, ka elementa saturs tiek dinamiski atjaunināts (piem.,
aria-live="polite"
,aria-live="assertive"
). - aria-expanded: Norāda, vai saliekams elements pašlaik ir izvērsts vai sakļauts.
- aria-haspopup: Norāda, ka elementam ir uznirstošā izvēlne.
Koda piemērs:
<button role="button" aria-label="Aizvērt dialogu" onclick="closeDialog()">X</button>
<div id="description">Šis ir attēla apraksts.</div>
<img src="example.jpg" aria-describedby="description" alt="Piemēra attēls">
Svarīga piezīme: Lietojiet ARIA atribūtus apdomīgi. Pārmērīga ARIA lietošana var radīt piekļūstamības problēmas. Vienmēr vispirms izmantojiet semantiskos HTML elementus un lietojiet ARIA tikai tad, ja tas ir nepieciešams, lai papildinātu vai ignorētu noklusējuma semantiku.
4. Navigācija ar Tastatūru
Pārliecinieties, ka visi interaktīvie elementi jūsu vietnē ir navigējami, izmantojot tikai tastatūru. Tas ir būtiski lietotājiem, kuri nevar izmantot peli vai citu rādītājierīci. Navigācija ar tastatūru lielā mērā balstās uz pareizu fokusa indikatoru lietošanu un loģisku tabulēšanas secību.
Labākā prakse:
- Fokusa Indikatori: Pārliecinieties, ka visiem interaktīvajiem elementiem (piem., saitēm, pogām, formas laukiem) ir skaidrs un redzams fokusa indikators, kad tie ir atlasīti. Izmantojiet CSS, lai stilizētu
:focus
stāvokli. - Tabulēšanas Secība: Tabulēšanas secībai jāatbilst loģiskajai lapas lasīšanas secībai (parasti no kreisās uz labo, no augšas uz leju). Izmantojiet
tabindex
atribūtu, lai pielāgotu tabulēšanas secību, ja nepieciešams. Izvairieties notabindex="0"
untabindex="-1"
lietošanas, ja vien tas nav absolūti nepieciešams, jo nepareizi lietojot, tie var radīt piekļūstamības problēmas. - Navigācijas Izlaišanas Saites: Lapas augšpusē nodrošiniet saiti "izlaist navigāciju", kas ļauj lietotājiem apiet galveno navigācijas izvēlni un pāriet tieši uz galveno saturu. Tas ir īpaši noderīgi lietotājiem, kuri izmanto ekrāna lasītājus, jo tas samazina nepieciešamību katrā lapā pārvietoties pa atkārtotām navigācijas saitēm.
- Modālie Dialogi: Atverot modālo dialogu, nodrošiniet, ka fokuss ir "iesprostots" dialoga iekšienē, līdz tas tiek aizvērts. Neļaujiet lietotājiem ar tabulēšanas taustiņu iziet ārpus dialoga.
Koda piemērs (Navigācijas Izlaišanas Saite):
<a href="#main-content" class="skip-link">Pāriet uz galveno saturu</a>
<header>
<nav>
<!-- Navigācijas Izvēlne -->
</nav>
</header>
<main id="main-content">
<!-- Galvenais Saturs -->
</main>
Koda piemērs (CSS Fokusa Indikatoram):
a:focus, button:focus, input:focus, textarea:focus, select:focus {
outline: 2px solid blue;
outline-offset: 2px;
}
5. Formu Piekļūstamība
Formas ir būtiska daudzu vietņu sastāvdaļa, un ir svarīgi nodrošināt, lai tās būtu piekļūstamas ekrāna lasītāju lietotājiem. Pareiza etiķešu pievienošana, skaidras instrukcijas un kļūdu apstrāde ir izšķirošas formu piekļūstamībai.
Labākā prakse:
- Etiķetes: Izmantojiet
<label>
elementu, lai saistītu etiķetes ar formas laukiem.<label>
elementafor
atribūtam jāsakrīt ar atbilstošā formas laukaid
atribūtu. - Instrukcijas: Sniedziet skaidras un kodolīgas instrukcijas formas aizpildīšanai. Izmantojiet
aria-describedby
atribūtu, lai saistītu instrukcijas ar formas laukiem. - Kļūdu Apstrāde: Rādiet kļūdu paziņojumus skaidri un pamanāmi. Izmantojiet
aria-live
atribūtu, lai paziņotu kļūdu ziņojumus ekrāna lasītāju lietotājiem. Saistiet kļūdu paziņojumus ar atbilstošajiem formas laukiem, izmantojotaria-describedby
atribūtu. - Obligātie Lauki: Skaidri norādiet obligātos laukus gan vizuāli, gan programmatiski. Izmantojiet
required
atribūtu, lai atzīmētu obligātos laukus. Izmantojietaria-required
atribūtu, lai norādītu ekrāna lasītāju lietotājiem, ka lauks ir obligāts. - Saistīto Lauku Grupēšana: Izmantojiet
<fieldset>
un<legend>
elementus, lai grupētu saistītus formas laukus.
Koda piemērs:
<label for="name">Vārds:</label>
<input type="text" id="name" name="name" required aria-required="true">
<div id="name-instructions">Lūdzu, ievadiet savu pilno vārdu.</div>
<label for="name">Vārds:</label>
<input type="text" id="name" name="name" aria-describedby="name-instructions">
<form>
<fieldset>
<legend>Kontaktinformācija</legend>
<label for="email">E-pasts:</label>
<input type="email" id="email" name="email" required aria-required="true"><br><br>
<label for="phone">Tālrunis:</label>
<input type="tel" id="phone" name="phone">
</fieldset>
</form>
6. Dinamiskā Satura Piekļūstamība
Kad saturs jūsu vietnē mainās dinamiski (piem., izmantojot AJAX vai JavaScript), ir svarīgi nodrošināt, ka ekrāna lasītāju lietotāji tiek informēti par izmaiņām. Izmantojiet ARIA "dzīvos reģionus" (live regions), lai paziņotu par dinamiskā satura atjauninājumiem.
ARIA "Dzīvie Reģioni":
- aria-live="off": Noklusējuma vērtība. Atjauninājumi reģionā netiek paziņoti.
- aria-live="polite": Paziņo par atjauninājumiem, kad lietotājs ir neaktīvs. Šī ir visizplatītākā un ieteicamākā vērtība.
- aria-live="assertive": Paziņo par atjauninājumiem nekavējoties, pārtraucot lietotāju. Lietojiet šo vērtību reti, jo tā var būt traucējoša.
Koda piemērs:
<div aria-live="polite" id="status-message"></div>
<script>
// Kad saturs tiek atjaunināts, atjauniniet statusa ziņojumu
document.getElementById('status-message').textContent = "Saturs veiksmīgi atjaunināts!";
</script>
7. Krāsu Kontrasts
Pārliecinieties, ka starp teksta un fona krāsām ir pietiekams krāsu kontrasts. Tas ir svarīgi lietotājiem ar vājredzību vai krāsu aklumu. Tīmekļa Satura Piekļūstamības Vadlīnijas (WCAG) nosaka kontrasta attiecību vismaz 4.5:1 normālam tekstam un 3:1 lielam tekstam.
Rīki Krāsu Kontrasta Pārbaudei:
- WebAIM Color Contrast Checker (webaim.org/resources/contrastchecker/)
- Coolors (coolors.co)
- Adobe Color (color.adobe.com)
8. Multivides Piekļūstamība
Ja jūsu vietnē ir audio vai video saturs, nodrošiniet alternatīvas lietotājiem, kuri nevar redzēt vai dzirdēt saturu. Tas ietver:
- Subtitri: Nodrošiniet subtitrus visam video saturam. Subtitri ir sinhronizēti audio celiņa teksta atšifrējumi.
- Transkripti: Nodrošiniet teksta atšifrējumus visam audio un video saturam. Transkriptos jāiekļauj viss runātais saturs, kā arī svarīgu skaņu un vizuālo elementu apraksti.
- Audio Apraksti: Nodrošiniet audio aprakstus video saturam. Audio apraksti stāsta par video vizuālajiem elementiem lietotājiem, kuri ir akli vai vājredzīgi.
9. Testēšana ar Ekrāna Lasītājiem
Visefektīvākais veids, kā nodrošināt, ka jūsu vietne ir piekļūstama ekrāna lasītāju lietotājiem, ir to testēt ar dažādiem ekrāna lasītājiem. Tas palīdzēs jums identificēt un novērst visas iespējamās piekļūstamības problēmas.
Testēšanas Rīki:
- Manuālā Testēšana: Izmantojiet ekrāna lasītājus, piemēram, NVDA (bezmaksas), JAWS (maksas) vai VoiceOver (iebūvēts macOS un iOS), lai pārvietotos pa savu vietni. Mēģiniet veikt biežākās darbības un mijiedarbības.
- Automatizētā Testēšana: Izmantojiet piekļūstamības testēšanas rīkus, lai identificētu potenciālās piekļūstamības problēmas. Šie rīki var palīdzēt atklāt biežākās kļūdas, taču tos nevajadzētu izmantot kā manuālās testēšanas aizstājēju. Daži populāri piekļūstamības testēšanas rīki ietver:
- WAVE (Web Accessibility Evaluation Tool)
- axe DevTools
- Lighthouse (Chrome DevTools)
Padomi Testēšanai ar Ekrāna Lasītājiem:
- Apgūstiet Pamatus: Iepazīstieties ar izmantotā ekrāna lasītāja pamatkomandām un navigācijas tehnikām.
- Izmantojiet Dažādus Ekrāna Lasītājus: Pārbaudiet savu vietni ar dažādiem ekrāna lasītājiem, jo katrs ekrāna lasītājs interpretē tīmekļa saturu atšķirīgi.
- Iesaistiet Lietotājus ar Invaliditāti: Labākais veids, kā nodrošināt, ka jūsu vietne ir piekļūstama, ir iesaistīt lietotājus ar invaliditāti testēšanas procesā. Saņemiet atsauksmes no ekrāna lasītāju lietotājiem par jūsu vietnes lietojamību un piekļūstamību.
WCAG (Tīmekļa Satura Piekļūstamības Vadlīnijas)
Tīmekļa Satura Piekļūstamības Vadlīnijas (WCAG) ir starptautiski atzīts vadlīniju kopums, kas paredzēts tīmekļa satura padarīšanai piekļūstamākam. WCAG izstrādā Vispasaules Tīmekļa konsorcijs (W3C), un tās tiek plaši izmantotas kā tīmekļa piekļūstamības standarts.
WCAG ir organizētas ap četriem principiem, kas pazīstami kā POUR:
- Uztverams: Informācijai un lietotāja saskarnes komponentiem jābūt pasniegtiem lietotājiem tādos veidos, kādus viņi var uztvert.
- Darbībspējīgs: Lietotāja saskarnes komponentiem un navigācijai jābūt darbībspējīgiem.
- Saprotams: Informācijai un lietotāja saskarnes darbībai jābūt saprotamai.
- Robusta: Saturam jābūt pietiekami robustam, lai to varētu uzticami interpretēt dažādi lietotāju aģenti, tostarp palīgtehnoloģijas.
WCAG ir sadalītas trīs atbilstības līmeņos: A, AA un AAA. A līmenis ir visvienkāršākais piekļūstamības līmenis, savukārt AAA līmenis ir augstākais. Lielākā daļa organizāciju cenšas atbilst AA līmenim.
Noslēgums
Jūsu vietnes optimizēšana ekrāna lasītāju lietotājiem ir būtisks solis ceļā uz patiesi iekļaujošas un piekļūstamas tiešsaistes pieredzes radīšanu. Ievērojot šajā rokasgrāmatā izklāstītos principus un labāko praksi, jūs varat nodrošināt, ka jūsu vietne ir pieejama visiem lietotājiem, neatkarīgi no invaliditātes.
Atcerieties, ka tīmekļa piekļūstamība ir nepārtraukts process. Regulāri pārbaudiet savu vietni ar ekrāna lasītājiem un piekļūstamības testēšanas rīkiem un sekojiet līdzi jaunākajām piekļūstamības vadlīnijām un labākajai praksei. Padarot piekļūstamību par prioritāti, jūs varat radīt labāku tīmekli ikvienam.
Papildu Resursi:
- WebAIM: https://webaim.org/
- W3C Web Accessibility Initiative (WAI): https://www.w3.org/WAI/
- Deque University: https://dequeuniversity.com/